<template>
	<view>
		<u-card :show-head="false" :show-foot="false">
			<view class="" slot="body">
				<u-form :model="formData" labelWidth="80px">
					<u-form-item label="锁名称" prop="lockName" required>
						<u-input v-model="formData.lockName" placeholder="请输入"></u-input>
					</u-form-item>
					<u-form-item label="分组" prop="groupName" required>
						<u-input v-model="formData.groupName" disabled="true" placeholder="请选择"  @click="show = true" right-icon="arrow-down-fill"></u-input>
					</u-form-item>
				</u-form>
				<u-select v-model="show" :list="groupOptions" @confirm="groupConfirm"></u-select>
			</view>
		</u-card>
		<view class="padding-left padding-right">
			<u-button type="primary" @click="nextStep" :disabled="nextStepDisabled">下一步</u-button>
		</view>
	</view>
</template>

<script>
	import {getGroupList} from "@/api/base/index";

  export default {
		data() {
			return {
				show:false,
				formData: {
					lockName: null,
					group: null,
					groupName: null
				},
				groupOptions: [{
					label: '县城片区',
					value: '1'
				}, {
					label: '积山片区',
					value: '2'
				}, {
					label: '马洋溪片区',
					value: '3'
				}],
			}
		},
		computed: {
			nextStepDisabled() {
				return !this.formData.groupName || !this.formData.lockName
			}
		},
		methods: {
			nextStep() {
				this.$tab.navigateTo('/pages/device/lock/add-step-second')
			},
			groupConfirm(option) {
				console.log(option);
				this.formData.group = option[0].value
				this.formData.groupName = option[0].label
			},
      getGroupList() {
        getGroupList().then(res => {
          this.groupOptions = res.rows.map(item => {
            return {
              label: item.groupName,
              value: item.groupId
            }
          })
        })
      }
		},
    mounted() {
      this.getGroupList()
    }
	}
</script>

<style>

</style>
